<template>
  <t-tabs size="medium" v-model="tabValue">
    <t-tab-panel :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="1" label="基本信息" :destroyOnHide="true">
      <t-form labelWidth="160px">
        <t-card class="step-card" size="small" title="基本信息">
          <t-row style="align-items: stretch" :gutter="14">
            <t-col :span="6">
              <t-form-item label="项目名称：" name="projectName">
                {{ data.projectName }}
              </t-form-item>
              <t-form-item label="承担单位：">
                {{ data.declareDeptName }}
              </t-form-item>
              <t-form-item label="组织方式：" name="orgMode">
                {{ data.orgMode | filterByDict(dict.type.org_mode) }}
              </t-form-item>
              <t-form-item label="所属产业：" name="owningIndustry">
                {{ data.owningIndustry | filterByDict(dict.type.owning_industry) }}
              </t-form-item>
              <t-form-item label="依托平台：" name="supportPlatform">
                {{ data.supportPlatform | filterByDict(dict.type.support_platform) }}
              </t-form-item>
              <t-form-item label="项目开始时间：" name="startDate">
                {{ data.startDate }}
              </t-form-item>
              <t-form-item label="预计总投入：" name="adviceFunding"> {{ data.adviceFunding }}万元 </t-form-item>
            </t-col>

            <t-col :span="6">
              <t-form-item label="项目编号：" name="projectNum">
                {{ data.projectNum || '暂未分配' }}
              </t-form-item>
              <t-form-item label="项目类型：" name="projectType">
                {{ data.projectType | filterByDict(dict.type.three_project_type) }}
              </t-form-item>
              <t-form-item label="项目领域：" name="projectDomain">
                {{ data.projectDomain | filterByDict(dict.type.three_project_domain) }}
              </t-form-item>
              <t-form-item label="所属学科：" name="owningSubject">
                {{ data.owningSubject | filterByDict(dict.type.owning_subject) }}
              </t-form-item>
              <t-form-item label="所属创新团队：" name="owningTeam">
                {{ data.owningTeam | filterByDict(dict.type.owning_team) }}
              </t-form-item>
              <t-form-item label="项目结束时间：" name="endDate">
                {{ data.endDate }}
              </t-form-item>
              <t-form-item label="财政科技经费：" name="subsidyFunding"> {{ data.subsidyFunding }}万元 </t-form-item>

            </t-col>
          </t-row>
          <t-row>
            <t-col :span="12">
              <t-form-item label="关键词：" name="keyWord">
                {{ data.keyWord }}
              </t-form-item>
            </t-col>
          </t-row>
          <t-row>
            <t-col :span="12" class="title">
              <t-form-item label="项目内容摘要：" name="">
                <inner-html :content="data.digest"></inner-html>
              </t-form-item>
            </t-col>
          </t-row>
          <!-- <t-row>
            <t-col :span="12">
              <t-form-item name="digest">
                <inner-html :content="data.digest"></inner-html>
              </t-form-item>
            </t-col>
          </t-row> -->

        </t-card>

      </t-form>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="2" label="项目负责人" :destroyOnHide="true">
      <t-form labelWidth="160px">

        <t-card class="step-card" size="small" title="项目负责人">
          <t-row style="align-items: stretch" :gutter="14" v-if="!hideInfo">
            <t-col :span="6">

              <t-form-item label="姓名：" name="projectLeader.name">
                {{ data.projectLeader.name }}
              </t-form-item>
              <t-form-item label="性别：" name="projectLeader.sex">
                {{ data.projectLeader.sex | filterByDict(dict.type.sys_user_sex) }}
              </t-form-item>
              <t-form-item label="出生年月：" name="projectLeader.birthDate">
                {{ data.projectLeader.birthDate }}
              </t-form-item>
              <t-form-item label="身份证号：" name="projectLeader.idCard">
                {{ data.projectLeader.idCard }}
              </t-form-item>
              <t-form-item label="工作单位：" name="projectLeader.companyId">
                {{ data.projectLeader.company }}
              </t-form-item>
              <t-form-item label="联系电话：" name="projectLeader.phone">
                {{ data.projectLeader.phone }}
              </t-form-item>
              <t-form-item label="通讯地址：" name="projectLeader.address">
                {{ data.projectLeader.address }}
              </t-form-item>
              <t-form-item label="电子信箱：" name="projectLeader.email">
                {{ data.projectLeader.email }}
              </t-form-item>
              <t-form-item label="邮编：" name="projectLeader.postCode">
                {{ data.projectLeader.postCode }}
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item label="学历：" name="projectLeader.education">
                {{ data.projectLeader.education | filterByDict(dict.type.education) }}
              </t-form-item>
              <t-form-item label="学位：" name="projectLeader.degree">
                {{ data.projectLeader.degree | filterByDict(dict.type.degree) }}
              </t-form-item>
              <t-form-item label="所学专业：" name="projectLeader.majorName">
                {{ data.projectLeader.majorName }}
              </t-form-item>
              <t-form-item label="现从事专业：" name="projectLeader.majorNowName">
                {{ data.projectLeader.majorNowName }}
              </t-form-item>
              <t-form-item label="职务：" name="projectLeader.duty">
                {{ data.projectLeader.duty }}
              </t-form-item>
              <t-form-item label="技术职称：" name="projectLeader.profTitId">
                {{ data.projectLeader.profTitId | filterByTree(profTitOptions) }}
              </t-form-item>
              <t-form-item label="职称：" name="projectLeader.profTit">
                {{ data.projectLeader.profTit | filterByDict(dict.type.prof_tit) }}
              </t-form-item>

            </t-col>
          </t-row>
        </t-card>
      </t-form>
    </t-tab-panel>
    <t-tab-panel :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="8" label="附件信息" :destroyOnHide="true"
      v-if="!hideInfo">
      <t-table v-if="isMyProject" row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{ row, rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #op="{ row }">
          <file-upload v-if="['projectSBS', 'projectSMSCYJ'].includes(row.moduleKey)" @success="uploadSuccess"
            tips="限制pdf、图片" accept="application/pdf,image/*" v-model="row.fileIds" :moduleKey="row.moduleKey"
            :fileList="row.fileLists" :multiple="true">
            <t-button variant="outline">
              <t-icon name="cloud-upload" slot="icon" />
              点击上传
            </t-button>
          </file-upload>
          <a v-else class="t-button-link" target="_blank" v-for="(item, index) in row.fileLists" :href="item.url"
            :key="index">
            {{ item.name }}
          </a>
        </template>
        <template #c1="{ row }">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
      </t-table>
      <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
        <template #id="{ row, rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #c1="{ row }">
          <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
          <div v-else>{{ row.c1 }}</div>
        </template>
        <template #op="{ row }">
          <div v-for="(item, index) in row.fileLists" :key="index">
            <a class="t-button-link" target="_blank" :href="item.url">
              {{ item.name }}
            </a>
          </div>
        </template>
      </t-table>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import { getFiles } from '@/api/common';
import FileUpload from '@/components/FileUpload/index.vue';
import InnerHtml from '@/components/InnerHtml/index.vue';
import dayjs from 'dayjs';

export default {
  components: {
    FileUpload,
    InnerHtml,
  },
  dicts: ['sys_user_sex', 'education', 'degree', 'profTitOptions', 'prof_tit', 'kjxm_key_word', 'org_mode', 'owning_industry', 'support_platform', 'three_project_type', 'three_project_domain', 'owning_subject', 'owning_team'],
  props: {
    objId: [String, Number],
    reviewOpen: {
      type: Boolean,
      default: false,
    },
    hideByProjectType: {
      type: Boolean,
      default: false,
    },
    hideInfo: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isMyProject: false,
      fundingObj: { subsidyFunding: 0, adviceFunding: 0 },
      disableDate: {},
      tabValue: '1',
      projectCategoryOptions: [],
      expresswayOptions: [],
      profTitOptions: [],
      projectFileColumns: [
        {
          colKey: 'id',
          title: '序号',
          align: 'center',
          width: 64,
        },
        {
          colKey: 'c1',
          title: '附件名称',
          align: 'center',
        },
        {
          colKey: 'c2',
          title: '是否必需',
          align: 'center',
        },
        {
          colKey: 'op',
          title: '附件列表',
          align: 'left',
        },
      ],
      projectFileData: [
        {
          id: 1,
          c1: "申报阶段文件",
          c2: "是",
          moduleKey: "03projectLXWJ",
          fileIds: [],
          fileLists: [],
          require: true,
        },
        {
          id: 2,
          c1: "合同阶段文件",
          c2: "是",
          fileIds: [],
          fileLists: [],
          moduleKey: "03projectHTWJ",
          require: true,
        },
        {
          id: 3,
          c1: "验收阶段文件",
          c2: "是",
          // c3: 'view/模板/项目组科研诚信承诺书.pdf',
          fileIds: [],
          fileLists: [],
          moduleKey: "03projectYSWJ",
          require: true,
        },
        {
          id: 6,
          c1: "其他",
          c2: "否",
          moduleKey: "03projectQT",
          fileIds: [],
          fileLists: [],
          require: false,
        },
      ],
      data: {
        projectCategory: '',
        projectTeam: {},
        projectLeader: {},
        projectLinker: {},
        projectBackground: {
          background: '',
        },
        projectApproach: {
          projectExpectResults: [],
        },
        projectBasicstudy: {},
        projectCompanyList: [],
        projectMembers: [],
        projectBudget: {},
        deptName: '',
        sysExpressway: {
          code: '',
          startNum: '',
          endNum: '',
        },
      },
    };
  },
  created () {
    this.getObj();
    this.getDeclareTree();
    this.getprofTitTreeSelect();
  },
  methods: {
    getDeclareTree () {
      return this.$api.kjxm.project
        .planCategoryTree()
        .then((response) => {
          this.projectCategoryOptions = response.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getprofTitTreeSelect () {
      return this.$api.system.profTit
        .treeselect()
        .then((response) => {
          this.profTitOptions = response.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getExpresswayTreeSelect () {
      return this.$api.system.expressway
        .treeSelect()
        .then((res) => {
          this.expresswayOptions = res.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    uploadSuccess (ids) {
      this.$api.kjxm.threeProject
        .edit({
          id: this.objId,
          sysAttMainVo: {
            sysAttMainIds: ids,
          },
        })
        .then((val) => {
          this.$message.success('上传成功');
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getObj () {
      if (this.hideInfo) {
        this.$api.kjxm.threeProject
          .getAllHide(this.objId)
          .then((response) => {
            this.isMyProject = this.$store.state.user.userId === response.data.createUserId;
            response.data.projectMembers = response.data.projectMembers || [];
            this.disableDate = {
              before: dayjs(response.data.startDate, 'YYYY-MM-DD').endOf('month').subtract(1, 'month').format(),
              after: dayjs(response.data.endDate, 'YYYY-MM-DD').endOf('month').subtract(0, 'month').format(),
            };
            this.fundingObj = {
              adviceFunding: response.data.adviceFunding,
              subsidyFunding: response.data.subsidyFunding,
            };
            Object.assign(this.data, response.data);
            if (this.site_tag === 'jt' && this.data.isRoadProject === '1') {
              this.getExpresswayTreeSelect();
            }
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      } else {
        this.$api.kjxm.threeProject
          .get(this.objId)
          .then((response) => {
            if (response.data.createUserId === Number(this.$store.state.user.userId)) {
              this.isMyProject = true;
            }
            response.data.projectMembers = response.data.projectMembers || [];
            this.disableDate = {
              before: dayjs(response.data.startDate, 'YYYY-MM-DD').endOf('month').subtract(1, 'month').format(),
              after: dayjs(response.data.endDate, 'YYYY-MM-DD').endOf('month').subtract(0, 'month').format(),
            };
            this.fundingObj = {
              adviceFunding: response.data.adviceFunding,
              subsidyFunding: response.data.subsidyFunding,
            };
            Object.assign(this.data, response.data);
            if (this.site_tag === 'jt' && this.data.isRoadProject === '1') {
              this.getExpresswayTreeSelect();
            }
            // 获取项目附件
            getFiles(this.objId)
              .then((res) => {
                const files = {};
                res.data.forEach((item) => {
                  if (!files[item.moduleKey]) {
                    files[item.moduleKey] = [];
                  }
                  files[item.moduleKey].push({
                    name: item.fileName,
                    url: item.fullFilePath,
                    id: item.id,
                    filePath: item.filePath,
                  });
                });
                this.projectFileData.forEach((val, index) => {
                  this.projectFileData[index].fileLists = files[val.moduleKey] || [];
                  this.projectFileData[index].fileIds = files[val.moduleKey]?.map((val) => val.id) || [];
                });
              })
              .catch((e) => {
                this.$message.error(e.toString());
              });
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

.tab-panel {
  height: calc(65vh - 64px);
  overflow: scroll;
}

.tab-full-panel {
  height: calc(80vh - 64px);
  overflow: scroll;
}

.t-form__item {
  margin-bottom: 6px;
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
